/* ================
		Display
================ */
.com-block {
  display: block;
}

.com-inline-block {
  display: inline-block;
}

.com-inline {
  display: inline;
}

.com-hidden {
  display: none;
}

.com-visible {
  visibility: visible;
}

.com-invisible {
  visibility: hidden;
}

/* ================
		Position
================ */
.com-relative {
  position: relative;
}

.com-absolute {
  position: absolute;
}

.com-static {
  position: static;
}

.com-sticky {
  position: sticky;
}

.com-inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.com-inset-px {
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
}

/* #ifndef APP-NVUE */
.com-inset-auto {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

/* #endif */
.com-inset-full {
  top: 100%;
  right: 100%;
  bottom: 100%;
  left: 100%;
}

@for $i from 0 through 100 {
  // top: {0-100}px;
  .com-top-#{$i} {
    top: $i + px;
  }

  // right: {0-100}px;
  .com-right-#{$i} {
    right: $i + px;
  }

  // bottom: {0-100}px;
  .com-bottom-#{$i} {
    bottom: $i + px;
  }

  // left: {0-100}px;
  .com-left-#{$i} {
    left: $i + px;
  }
}

/* ================
		Z-Index
================ */
/* #ifndef APP-NVUE */
.z-auto {
  z-index: auto;
}

/* #endif */

@for $i from 1 through 10 {
  .com-z-#{$i} {
    z-index: $i * 10 !important;
  }
}

/* ================
		Overflow
================ */
.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-y-visible {
  overflow-y: visible;
}
